sdk/samples/all in on code/Visual Studio 2010/VBASPNETGridView/ReadMe.txt

   1 ========================================================================
   2     CONSOLE APPLICATION : VBASPNETGridView Project Overview
   3 ========================================================================
   4
   5 /////////////////////////////////////////////////////////////////////////////
   6 Summary:
   7
   8 This VBASPNETGridView project describes how to populate ASP.NET GridView
   9 control and how to implement Insert, Edit, Update, Delete, Paging
  10 and Sorting functions in ASP.NET GridView control.
  11
  12 This project includes two samples: DataInMemory and DataFromDatabase.
  13
  14 DataInMemory populates GridView with a simple DataTable. The DataTable
  15 is stored in ViewState to persist data across postbacks.
  16
  17 DataFromDatabase populates GridView with data from SQL Server database in
  18 ADO.NET way. The sample uses the GridView database.
  19
  20 /////////////////////////////////////////////////////////////////////////////
  21 Creation:
  22
  23 Step1. Create a VB ASP.NET Web Application named VBASPNETGridView in
  24 Visual Studio 2010 / Visual Web Developer.
  25
  26
  27 Step2. Drag a GridView control, a LinkButton control and a Panel control
  28 into an ASP.NET Web Form page.
  29
  30         (1) Rename the controls as follows:
  31
  32     GridView1    -> gvPerson
  33     LinkButton1  -> lbtnAdd
  34     Panel1               -> pnlAdd
  35
  36     (2) Change the Text property of lbtnAdd to AddNew.
  37
  38         (3) Right-click on gvPerson, select Show Smart Tag -> Auto Format,
  39         choose style Oceanica and press OK to save.
  40
  41         (4) On Show Smart Tag, select Add New Columns, choose CommandField,
  42         check Delete, Edit/Update and Show cancel button then press OK.
  43
  44         (5) On Show Smart Tag, select Add New Columns, choose BoundField,
  45         and add the following three columns:
  46
  47         Header text             Data field              Read only
  48         -----------------------------------------
  49         PersonID                PersonID                Y
  50         LastName                LastName                N
  51         FirstName               FirstName               N
  52
  53
  54         (6) On Show Smart Tag, select Edit Columns,
  55         un-check Auto-generate fields, select LastName field,
  56         and click Convert this field into a TemplateField.
  57         Do the same operation to FirstName field.
  58
  59         Related references:
  60
  61         ASP.NET: Using TemplateFields in the GridView Control
  62         MSDN: TemplateField Class
  63
  64
  65 Step3. Copy the following methods from the sample,
  66 and paste them in code-behind:
  67
  68         DataInMemory.aspx.vb
  69
  70                 Page_Load Method:
  71                 Initialize underlying objects, when the Page is accessed
  72                 for the first time.
  73
  74                 InitializeDataSource Method:
  75                 Initialize the DataTable and store it in ViewState.
  76
  77                 BindGridView Method:
  78                 Set the sort column and sort order and bind the GridView
  79                 control with a DataTable in ViewState.
  80
  81
  82         DataFromDatabase.aspx.vb
  83
  84                 Page_Load Method:
  85                 Initialize underlying objects, when the Page is accessed
  86                 for the first time.
  87
  88                 BindGridView    Method:
  89                 Set the sort column and sort order and bind the GridView
  90                 control with a SQL Server table.
  91
  92         Related references:
  93
  94         MSDN: using Statement (VB Reference)
  95         MSDN: Understanding ASP.NET View State
  96
  97
  98 Step4. Drag two TextBox controls and two LinkButton controls into
  99 pnlAdd.
 100
 101         (1) Rename the controls as follows:
 102
 103     TextBox1     -> tbLastName
 104     TextBox2     -> tbFirstName
 105     LinkButton1  ->     lbtnSubmit
 106     LinkButton2  ->     lbtnCancel
 107
 108     (2) Change the Text properties of lbtnSubmit and to Submit
 109     and Cancel.
 110
 111 Step5. Navigate to the Property panel of gvPerson and then switch to Event.
 112 Double-click on the following events to generate the Event handlers.
 113 After that, fill the generated methods with the sample code.
 114
 115
 116         (1)     RowDataBound Event: Occurs when a data row is bound to
 117         data in a GridView control.
 118
 119         In this event, we add a client-side confirmation dialog box that
 120         appears when the Delete button is clicked. It will prevent deleting a
 121         row accidentally.
 122
 123         Related references:
 124
 125         MSDN: GridView.RowDataBound Event
 126         ASP.NET: Editing, Inserting, and Deleting Data
 127         ASP.NET: Adding Client-Side Confirmation When Deleting
 128         MSDN: WebControl.Attributes Property
 129         MSDN: DataControlRowType Enumeration
 130         MSDN: GridViewRow.RowState Property
 131
 132
 133         (2)     PageIndexChanging Event: Occurs when one of the pager buttons is
 134         clicked, but before the GridView control handles the paging operation.
 135
 136         In other to show data in the new page, we need to set the index of new
 137         page and then rebind the GridView control to show data in view mode.
 138
 139         When clicking the Edit button to edit a particular row, the GridVew
 140         control will enter the edit mode and show Update and Cancel buttons.
 141
 142         Related reference:
 143
 144         MSDN: GridView.PageIndexChanging Event
 145
 146
 147         (3)     RowEditing Event: Occurs when a row's Edit button is clicked,
 148         but before the GridView control enters edit mode.
 149
 150         To make the GridView control into edit mode for the select row,
 151         we need to set the index of the row to edit and then rebind the
 152         GridView control to render data in edit mode.
 153
 154         Related references:
 155
 156         MSDN: GridView.RowEditing Event
 157         MSDN: GridView.EditIndex Property
 158
 159
 160         (4)     RowCancelingEdit Event: Occurs when the Cancel button of a row
 161         in edit mode is clicked, but before the row exits edit mode.
 162
 163         We can click the Cancel button to cancel the edit mode and show data
 164         in normal view mode.
 165
 166         In this Event, we need to set the zero-based GridView.EditIndex
 167         property to -1, which means no row is being edited, and then rebind
 168         the GridView to show data in view mode.
 169
 170         ////////////////////////////////////////////////////////////////
 171         gvPerson.EditIndex = -1
 172         BindGridView()
 173         ////////////////////////////////////////////////////////////////
 174
 175         Related reference:
 176
 177         MSDN: GridView.RowCancelingEdit Event
 178
 179
 180         (5)     RowUpdating Event: Occurs when a row's Update button is clicked,
 181         but before the GridView control updates the row.
 182
 183         After modifying values in the selected row, we click the Update button
 184         to save changes back to the data source.
 185
 186         To identify the person for editing, the PersonID value is required,
 187         which is read-only and cannot be modified.
 188
 189         ////////////////////////////////////////////////////////////////
 190         Dim strPersonID As String = gvPerson.Rows(e.RowIndex).Cells(2).Text
 191         ////////////////////////////////////////////////////////////////
 192
 193         e.RowIndex is the index of current row.
 194
 195         In Step2 we converted LastName and FirstName to TemplateFields, so we
 196         cannot get the edit values directly. Since LastName and FirstName are
 197         both string values, Label controls are generated in ItemTemplate for
 198         displaying values and TextBox controls are generated in EditItemTemplate
 199         for editing values.
 200
 201         We can access the cells and fetch the values in the following way:
 202
 203         ////////////////////////////////////////////////////////////////
 204         Dim strLastName As String = DirectCast(gvPerson.Rows(e.RowIndex).FindControl("TextBox1"), TextBox).Text
 205     Dim strFirstName As String = DirectCast(gvPerson.Rows(e.RowIndex).FindControl("TextBox2"), TextBox).Text
 206         ////////////////////////////////////////////////////////////////
 207
 208         After fetch these values, we can save them back to the DataTable in
 209         ViewState or the table in SQL Server.
 210
 211         Related references:
 212
 213         MSDN: GridView.RowUpdating Event
 214         ASP.NET: Editing, Inserting, and Deleting Data
 215
 216
 217         (6)     RowDeleting Event: Occurs when a row's Delete button is clicked,
 218         but before the GridView control deletes the row.
 219
 220         To identify the person for deleting, the PersonID value is required,
 221         which is read-only and cannot be modified.
 222
 223         ////////////////////////////////////////////////////////////////
 224         Dim strPersonID As String = gvPerson.Rows(e.RowIndex).Cells(2).Text
 225         ////////////////////////////////////////////////////////////////
 226
 227         After fetching the PersonID, we can delete the person from the DataTable
 228         in ViewState or the table in SQL Server.
 229
 230         Related references:
 231
 232         MSDN: GridView.RowDeleting Event
 233         ASP.NET: Editing, Inserting, and Deleting Data
 234
 235
 236         (7)     Sorting Event: Occurs when the hyperlink to sort a column is
 237         clicked, but before the GridView control handles the sort operation.
 238
 239         The SortDirection property on the GridView is changed only when the
 240         GridView is bound to a DataSource control using the DataSourceID
 241         property. Otherwise, sort direction always return "Ascending" and
 242         needs to be manipulated manually.
 243
 244         In the Page_Load Event, we store a default sorting expression
 245         in ViewState.
 246
 247         ////////////////////////////////////////////////////////////////
 248         ViewState("SortExpression") = "PersonID ASC"
 249         ////////////////////////////////////////////////////////////////
 250
 251         And set the sort column and sort order based on it in BindGridView method.
 252
 253         ////////////////////////////////////////////////////////////////
 254         dvPerson.Sort = ViewState("SortExpression").ToString()
 255         ////////////////////////////////////////////////////////////////
 256
 257         So when first visiting the page, all Person record will be shown in
 258         ascending order of PersonID.
 259
 260         When clicking a column’s header to sort
 261         this column, we need to get previous sort column and sort order and
 262         compare the sort column with the current column.
 263
 264         If they are same, we just change the sort order to show data in the
 265         other order, e.g. ascending to descending or descending to ascending.
 266
 267         If not, we specify the current column as the sort column and set sort
 268         order to ASC. The sort expression is stored into ViewState to persist
 269         data across postbacks.
 270
 271         Related references:
 272
 273         MSDN: DataView.Sort Property
 274         MSDN: GridView.Sorting Event
 275
 276
 277 Step6. Double-click on the Click event of lbtnAdd to generate the Event
 278 handlder and fill the generated methods with the sample code. Do the same
 279 operations to lbtnSubmit and lbtnCancel.
 280
 281         lbtnAdd.Click Event:
 282         Hide the Add button and showing Add panel.
 283
 284         lbtnSubmit.Click Event:
 285         Fetch the values of the TextBox controls and add new row to the
 286         DataTable in ViewState or the table in SQL Server.
 287
 288         lbtnCancel.Click Event:
 289         Show the Add button and hiding the Add panel.
 290
 291
 292
 293 /////////////////////////////////////////////////////////////////////////////
 294 References:
 295
 296 MSDN: using Statement (VB Reference)
 297 http://msdn.microsoft.com/en-us/library/yh598w02.aspx
 298
 299 MSDN: Understanding ASP.NET View State
 300 http://msdn.microsoft.com/en-us/library/ms972976.aspx
 301
 302 ASP.NET: Using TemplateFields in the GridView Control
 303 http://www.asp.net/learn/data-access/tutorial-12-cs.aspx
 304
 305 MSDN: TemplateField Class
 306 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatefield.aspx
 307
 308 MSDN: GridView.RowDataBound Event
 309 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowdatabound.aspx
 310
 311 ASP.NET: Editing, Inserting, and Deleting Data
 312 http://www.asp.net/learn/data-access/#editinsertdelete
 313
 314 ASP.NET: Adding Client-Side Confirmation When Deleting
 315 http://www.asp.net/learn/data-access/tutorial-22-cs.aspx
 316
 317 MSDN: WebControl.Attributes Property
 318 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.attributes.aspx
 319
 320 MSDN: DataControlRowType Enumeration
 321 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datacontrolrowtype.aspx
 322
 323 MSDN: GridViewRow.RowState Property
 324 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridviewrow.rowstate.aspx
 325
 326 MSDN: GridView.PageIndexChanging Event
 327 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.pageindexchanging.aspx
 328
 329 MSDN: GridView.RowEditing Event
 330 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowediting.aspx
 331
 332 MSDN: GridView.EditIndex Property
 333 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.editindex.aspx
 334
 335 MSDN: GridView.RowCancelingEdit Event
 336 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowcancelingedit.aspx
 337
 338 MSDN: GridView.RowUpdating Event
 339 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowupdating.aspx
 340
 341 MSDN: GridView.RowDeleting Event
 342 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowdeleting.aspx
 343
 344 MSDN: DataView.Sort Property
 345 http://msdn.microsoft.com/en-us/library/system.data.dataview.sort.aspx
 346
 347 MSDN: GridView.Sorting Event
 348 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.sorting.aspx
 349
 350 /////////////////////////////////////////////////////////////////////////////